<template>
  <div class="residency-application">
    <h1>国家大学科技园年度报表</h1>
    <el-form :model="form" :rules="formRules" label-width="180px" ref="formRef">
      <!-- 一、企业基本信息 -->
      <el-card>
        <div slot="header" class="header">一、企业基本信息</div>
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="creditCode">
          <el-input v-model="form.creditCode" placeholder="请输入统一社会信用代码" />
        </el-form-item>
        <el-form-item label="是否高新技术企业" prop="isHightechEnterprise">
          <el-radio-group v-model="form.isHightechEnterprise">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="高新技术企业证书编号" v-if="form.isHightechEnterprise === 1">
          <el-input v-model="form.highTechCertificateNo" placeholder="请输入证书编号" />
        </el-form-item>
        <el-form-item label="是否科技型中小企业" prop="isTechSmallMedium">
          <el-radio-group v-model="form.isTechSmallMedium">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="科技型中小企业登记编码" v-if="form.isTechSmallMedium === 1">
          <el-input v-model="form.techSmeRegistrationCode" placeholder="请输入登记编码" />
        </el-form-item>
        <el-form-item label="是否创新型中小企业" prop="isInnovativeSme">
          <el-radio-group v-model="form.isInnovativeSme">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否专精特新中小企业" prop="isSpecializedRefinedSme">
          <el-radio-group v-model="form.isSpecializedRefinedSme">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否专精特新小巨人企业" prop="isLittleGiantEnterprise">
          <el-radio-group v-model="form.isLittleGiantEnterprise">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-card>

      <!-- 二、在孵企业经济概况 -->
      <el-card>
        <div slot="header" class="header">二、在孵企业经济概况（千元）</div>
        <el-form-item label="总收入" prop="totalIncome">
          <el-input-number v-model="form.totalIncome" :min="0" />
        </el-form-item>
        <el-form-item label="工业总产值" prop="industrialOutput">
          <el-input-number v-model="form.industrialOutput" :min="0" />
        </el-form-item>
        <el-form-item label="净利润" prop="netProfit">
          <el-input-number v-model="form.netProfit" :min="0" />
        </el-form-item>
        <el-form-item label="上缴税额" prop="taxPayment">
          <el-input-number v-model="form.taxPayment" :min="0" />
        </el-form-item>
        <el-form-item label="出口总额" prop="exportVolume">
          <el-input-number v-model="form.exportVolume" :min="0" />
        </el-form-item>
      </el-card>

      <!-- 三、知识产权情况 -->
      <el-card>
        <div slot="header" class="header">三、知识产权情况（件）</div>
        <el-form-item label="专利申请数" prop="patentApplication">
          <el-input-number v-model="form.patentApplication" :min="0" />
        </el-form-item>
        <el-form-item label="发明专利申请数" prop="inventionPatentApplication">
          <el-input-number v-model="form.inventionPatentApplication" :min="0" />
        </el-form-item>
        <el-form-item label="专利授权数" prop="patentGranted">
          <el-input-number v-model="form.patentGranted" :min="0" />
        </el-form-item>
        <el-form-item label="发明专利授权数" prop="inventionPatentGranted">
          <el-input-number v-model="form.inventionPatentGranted" :min="0" />
        </el-form-item>
      </el-card>

      <!-- 四、从业人员情况 -->
      <el-card>
        <div slot="header" class="header">四、从业人员情况（人）</div>
        <el-form-item label="从业人员总数" prop="employees">
          <el-input-number v-model="form.employees" :min="0" />
        </el-form-item>
        <el-form-item label="博士" prop="doctorNum">
          <el-input-number v-model="form.doctorNum" :min="0" />
        </el-form-item>
        <el-form-item label="硕士" prop="masterNum">
          <el-input-number v-model="form.masterNum" :min="0" />
        </el-form-item>
        <el-form-item label="研究生学历" prop="postgraduateNum">
          <el-input-number v-model="form.postgraduateNum" :min="0" />
        </el-form-item>
        <el-form-item label="本科学历" prop="bachelorNum">
          <el-input-number v-model="form.bachelorNum" :min="0" />
        </el-form-item>
        <el-form-item label="大专学历" prop="collegeNum">
          <el-input-number v-model="form.collegeNum" :min="0" />
        </el-form-item>
        <el-form-item label="中专学历" prop="technicalSchoolNum">
          <el-input-number v-model="form.technicalSchoolNum" :min="0" />
        </el-form-item>
        <el-form-item label="研究开发人员" prop="rdPersonnel">
          <el-input-number v-model="form.rdPersonnel" :min="0" />
        </el-form-item>
        <el-form-item label="R&D人员" prop="rdPersonnelDetail">
          <el-input-number v-model="form.rdPersonnelDetail" :min="0" />
        </el-form-item>
        <el-form-item label="留学回国人员" prop="returnee">
          <el-input-number v-model="form.returnee" :min="0" />
        </el-form-item>
        <el-form-item label="接纳实习人员" prop="internAcceptance">
          <el-input-number v-model="form.internAcceptance" :min="0" />
        </el-form-item>
        <el-form-item label="接纳应届毕业生" prop="freshGraduateEmployment">
          <el-input-number v-model="form.freshGraduateEmployment" :min="0" />
        </el-form-item>
      </el-card>

      <!-- 五、科技活动情况 -->
      <el-card>
        <div slot="header" class="header">五、科技活动情况</div>
        <el-form-item label="科技项目总数" prop="techProjectTotal">
          <el-input-number v-model="form.techProjectTotal" :min="0" />
        </el-form-item>
        <el-form-item label="国家级项目数" prop="nationalTechProject">
          <el-input-number v-model="form.nationalTechProject" :min="0" />
        </el-form-item>
        <el-form-item label="研发经费支出总额（千元）" prop="rdExpenditureTotal">
          <el-input-number v-model="form.rdExpenditureTotal" :min="0" />
        </el-form-item>
        <el-form-item label="R&D经费支出（千元）" prop="rdExpenditure">
          <el-input-number v-model="form.rdExpenditure" :min="0" />
        </el-form-item>
        <el-form-item label="新产品开发支出（千元）" prop="newProductDevExpenditure">
          <el-input-number v-model="form.newProductDevExpenditure" :min="0" />
        </el-form-item>
      </el-card>

      <!-- 六、填表人信息 -->
      <el-card>
        <div slot="header" class="header">六、填表人信息</div>
        <el-form-item label="单位详细名称" prop="companyName">
          <el-input v-model="form.companyName" placeholder="请输入单位详细名称" />
        </el-form-item>
        <el-form-item label="单位负责人" prop="companyPrincipal">
          <el-input v-model="form.companyPrincipal" placeholder="请输入单位负责人" />
        </el-form-item>
        <el-form-item label="统计负责人" prop="statisticsPrincipal">
          <el-input v-model="form.statisticsPrincipal" placeholder="请输入统计负责人" />
        </el-form-item>
        <el-form-item label="填表人" prop="filler">
          <el-input v-model="form.filler" placeholder="请输入填表人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="报出日期" prop="reportDate">
          <el-date-picker v-model="form.reportDate" type="date" placeholder="请选择日期" />
        </el-form-item>
      </el-card>

      <!-- 提交 -->
      <el-form-item>
        <el-button type="primary">提交</el-button>
        <el-button>保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref<FormInstance>()

const form = reactive({
  enterpriseName: '',
  creditCode: '',
  isHightechEnterprise: 0,
  highTechCertificateNo: '',
  isTechSmallMedium: 0,
  techSmeRegistrationCode: '',
  isInnovativeSme: 0,
  isSpecializedRefinedSme: 0,
  isLittleGiantEnterprise: 0,

  totalIncome: null,
  industrialOutput: null,
  netProfit: null,
  taxPayment: null,
  exportVolume: null,

  patentApplication: null,
  inventionPatentApplication: null,
  patentGranted: null,
  inventionPatentGranted: null,

  employees: null,
  doctorNum: null,
  masterNum: null,
  postgraduateNum: null,
  bachelorNum: null,
  collegeNum: null,
  technicalSchoolNum: null,
  rdPersonnel: null,
  rdPersonnelDetail: null,
  returnee: null,
  internAcceptance: null,
  freshGraduateEmployment: null,

  techProjectTotal: null,
  nationalTechProject: null,
  rdExpenditureTotal: null,
  rdExpenditure: null,
  newProductDevExpenditure: null,

  companyName: '',
  companyPrincipal: '',
  statisticsPrincipal: '',
  filler: '',
  contactPhone: '',
  reportDate: ''
})

const formRules: FormRules = {
  enterpriseName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  creditCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
  contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  reportDate: [{ type: 'date', required: true, message: '请选择报出日期', trigger: 'change' }]
}

</script>
<style lang="scss" scoped>
.header {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
}
.el-card {
  margin: 20px auto;
}
.residency-application {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;

  :deep(.el-form-item__label) {
    font-weight: bold;
  }

  :deep(.el-table th, .el-table td) {
    font-weight: bold;
  }
}
</style>
